<template>
  <div class="container">
    <div class="left">
      <textarea ref="textareaRef" @input="textChange"></textarea>
    </div>
    <div class="right" v-html="HTML">
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
import MarkdownIt from 'markdown-it'
import hljs from "highlight.js/lib/core"
const textareaRef = ref(null)
const HTML = ref(null)
const textChange = () => {
  HTML.value = md.render(textareaRef.value.value)
}
const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str, true).value;
      } catch (__) { }
    }
    return ''; // 使用额外的默认转义
  }
})
</script>

<style lang="scss">
.container {
  box-sizing: border-box;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;

  >.left {
    flex: 1;
    height: 100%;
    overflow: hidden;

    >textarea {
      height: 100%;
      width: 100%;
      border: none;
      padding: 0;
      outline: none;
      padding: 10px;
      background-color: #1f1f1f;
      color: #e3e5e7;
    }
  }

  >.right {
    padding: 10px;
    flex: 1;
    height: 100%;
    color: #ffffff;
    background-color: #1f1f1f;
  }
}
</style>